let popup = document.querySelector('.popup');
let main = $('.main');
let doc = $(document);

// 跟随函数
const followMouse = ({
  offsetX = 0,
  offsetY = 0,
  followElement = undefined,
  baseElement,
}) => {
  let bElement = baseElement || doc;
  const getMousePos = (o, x, y, event) => {
    let posX = 0,
      posY = 0;
    let e = event || window.event;
    if (e.pageX || e.pageY) {
      posX = e.pageX;
      posY = e.pageY;
    } else if (e.clientX || e.clientY) {
      posX =
        e.clientX +
        document.documentElement.scrollLeft +
        document.body.scrollLeft;
      posY =
        e.clientY +
        document.documentElement.scrollTop +
        document.body.scrollTop;
    }
    o.style.position = 'absolute';
    o.style.left = posX + x + 'px';
    o.style.top = posY + y + 'px';
  }

  if (followElement !== undefined) {
    bElement.mousemove((e) => {
      getMousePos(followElement, offsetX, offsetY, e);
    })
    bElement.mouseover(() => {
      followElement.style.display = 'block';
    });
    bElement.mouseleave(() => {
      followElement.style.display = 'none';
    });
  }
}

$('.text').each(function() {
  followMouse({
    offsetX: 20,
    offsetY: 20,
    followElement: popup,
    baseElement: $(this),
  });
  $(this).mouseover(function(){
    let title = $(this).attr('data-title');
    let data = options.find((i) => {
      return i.title === title;
    });
    data = data.list.find((i) => {
      return i.key === $(this).attr('data-key');
    });
    $('.popup .popup-text').html(data.desc);
    if (data.code !== '' && data.code !== undefined) {
      $('.editor-bg').show();
      $('#editor').show();
      // $('.popup-text').css('margin-bottom', '10px');
      editor.session.setValue(data.code);
      formatCode();
    } else {
      $('.editor-bg').hide();
      $('#editor').hide();
      // $('.popup-text').css('margin-bottom', '0px');
    }
  });
});

$('.content-text').hide();

$('.content-body').mouseover(function() {
  $(this).children('.content-text').slideDown(200);
})

$('.content-body').mouseleave(function() {
  $(this).children('.content-text').slideUp(200);
})

